<template>
	<view>

		<!-- <view class="my_member_title">
			<u-tabs :list="tabsRlist" height="54" font-size="34" :is-scroll="true" bg-color="" active-color="#fff" inactive-color="#FFE8D6" :current="tabsrcurrent" @change="tabschange"></u-tabs>
		</view> -->
		
		<view class="tabs_wrap">
			<view class="my_tequan2">
				<view class="card_list">
					<view class="card_list_item" v-for="(card,index) in cardList" :key="index" @click="tabsRchange(card,index)" :class="[cardListidx == index?'selectA':'']">
						<view class="nianka">{{card.name}}</view>
					</view>
				</view>
			</view>
		</view>

		
		<view v-if="tabsrcurrent == 0">
			<view v-if="Leaderboard.length != 0">
				<view class="top_box_bg">
					<view class="qsm_box">
						<view class="dym_ren1">
							<view class="touxiang_diyi2">
								<image class="touxiang2" :src="avatar2"></image>
								<image class="guajian2" :src="BestImgUrl1 + 'yqb/yqb_two_icon.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="dym_ren2">
							<view class="touxiang_diyi">
								<image class="touxiang1" :src="avatar1"></image>
								<image class="guajian1" :src="BestImgUrl1 + 'yqb/yqb_one_icon.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="dym_ren3">
							<view class="touxiang_diyi3">
								<image class="touxiang3" :src="avatar3"></image>
								<image class="guajian3" :src="BestImgUrl1 + 'yqb/yqb_three_icon.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="ph_zhuzi_bpx">
						<view class="dibutu">
							<image class="ph_zhuzi" :src="BestImgUrl1 + 'yqb/yqb_sange.png'" mode="widthFix"></image>
							<view class="dibutu_jine">
								<view class="djer">{{formattedName(nickname2)}}</view>
								<view>{{formattedName(nickname1)}}</view>
								<view class="dijisna">{{formattedName(nickname3)}}</view>
							</view>
							<view class="dibutu_jine1">
								<view class="yizhuan">
									<view class="qianyi">¥{{amount2}}</view>
								</view>
								<view class="yizhuan">
									<view>¥{{amount1}}</view>
								</view>
								<view class="yizhuan">
									<view class="qianer">¥{{amount3}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="r_list" v-if="Leaderboard.length != 0">
				<view class="r_list_box" v-for="(itemr,indexr) in Leaderboard" :key="indexr" v-if="indexr >=3">
					<view class="l_1">
						<text>{{indexr +1}}</text>
						<view class="l_2">
							<view class="u_iamge">
								<image :src="itemr.avatar"></image>
							</view>
							<view class="u_name">{{formattedName(itemr.nickname)}}</view>
						</view>
					</view>
					<view class="l_4">{{itemr.amount}}元</view>
				</view>
			</view>
			<view v-else class="">
				<view class="noData_box">
					<image src="/static/images/noData.png" mode="widthFix"></image>
					<view>暂无排行榜</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<view v-if="tabsrcurrent == 1">
			<view v-if="Leaderboard2.length != 0">
				<view class="top_box_bg">
					<view class="qsm_box">
						<view class="dym_ren1">
							<view class="touxiang_diyi2">
								<image class="touxiang2" :src="avatar22"></image>
								<image class="guajian2" :src="BestImgUrl + 'yqb/yqb_two_icon.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="dym_ren2">
							<view class="touxiang_diyi">
								<image class="touxiang1" :src="avatar11"></image>
								<image class="guajian1" :src="BestImgUrl + 'yqb/yqb_one_icon.png'" mode="widthFix"></image>
							</view>
						</view>
						<view class="dym_ren3">
							<view class="touxiang_diyi3">
								<image class="touxiang3" :src="avatar33"></image>
								<image class="guajian3" :src="BestImgUrl + 'yqb/yqb_three_icon.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="ph_zhuzi_bpx">
						<view class="dibutu">
							<image class="ph_zhuzi" :src="BestImgUrl + 'yqb/yqb_sange.png'" mode="widthFix"></image>
							<view class="dibutu_jine">
								<view class="djer">{{formattedName(nickname22)}}</view>
								<view>{{formattedName(nickname11)}}</view>
								<view class="dijisna">{{formattedName(nickname33)}}</view>
							</view>
							<view class="dibutu_jine1">
								<view class="yizhuan">
									<view class="qianyi">{{amount22 || '0'}}人</view>
								</view>
								<view class="yizhuan">
									<view>{{amount11 || '0'}}人</view>
								</view>
								<view class="yizhuan">
									<view class="qianer">{{amount33 || '0'}}人</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="r_list" v-if="Leaderboard2.length != 0">
				<view class="r_list_box" v-for="(itemr,indexr) in Leaderboard2" :key="indexr" v-if="indexr >=3">
					<view class="l_1">
						<text>{{indexr +1}}</text>
						<view class="l_2">
							<view class="u_iamge">
								<image :src="itemr.avatar"></image>
							</view>
							<view class="u_name">{{formattedName(itemr.nickname)}}</view>
						</view>
					</view>
					<view class="l_4">{{itemr.user_num}}人</view>
				</view>
			</view>
			<view v-else class="">
				<view class="noData_box">
					<image src="/static/images/noData.png" mode="widthFix"></image>
					<view>暂无排行榜</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- <view style="height: 200rpx;"></view>
		<view class="xuanfu_botton">
			<view class="my_info">
				<image :src="userinfo.avatar || '/static/images/Group-33475.png'"></image>
				<view class="xf_myname">
					<view>{{userinfo.nickname}}</view>
					<view>我的排名：--</view>
				</view>
				<view class="right_czbtn" @click="toyq()">去邀请<u-icon name="arrow-right" color="#CB7333" size="24"></u-icon></view>
			</view>
		</view> -->

	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "rankingList",
		props: {

		},
		data() {
			return {


				BestImgUrl: app.globalData.imgurlBwc,
        BestImgUrl1: "https://h5.hwhsh.com/public/uploads/h5/",
				rankListArry: [],
				
				
				// tabsRlist: [{
				// 	name: '收益榜'
				// }, {
				// 	name: '好友榜'
				// }],
				tabsrcurrent: 0,
				
				
				Leaderboard: [],
				types: 1,//1总榜 2月榜 3周榜

				nickname1: '',
				avatar1: '',
				amount1: '',
				spread_people_num1: '',

				nickname2: '',
				avatar2: '',
				amount2: '',
				spread_people_num2: '',

				nickname3: '',
				avatar3: '',
				amount3: '',
				spread_people_num3: '',
				
				
				
				
				
				
				
				nickname11: '',
				avatar11: '',
				amount11: '',
				spread_people_num11: '',
				
				nickname22: '',
				avatar22: '',
				amount22: '',
				spread_people_num22: '',
				
				nickname33: '',
				avatar33: '',
				amount33: '',
				spread_people_num33: '',
				
				
				
				
				
				
				


				cardList: [{
					id: '1',
					name: '总榜'
				}, {
					id: '3',
					name: '月榜'
				}, {
					id: '3',
					name: '周榜'
				}],
				cardListidx: 0,
				
				userinfo: {},
				
				Leaderboard2: []

			};
		},
		created() {
			this.getLeaderboard()
			
			let user = uni.getStorageSync('userinfo')
			this.userinfo = user
		},
		methods: {
			formattedName(val) {
				let newVal = val.slice(0, 8);
				
				if(newVal.length <=2){
					return '****';
				}
				
				if(newVal.length > 2){
					return newVal.substring(0, 2) + new Array(newVal.length).join('*');
				}
				
				
				// const start = val.slice(0, 2)
				// const end = val.slice(-4)
				// return `${start}****${end}`
				
			},
			selectCard(data, idx) {
				let that = this
				that.cardListidx = idx
			},
      // 获取总榜单数据
			getLeaderboard() {
				let that = this
				that.$api.GetLeaderboard({
					type: that.types, //	是	int	1总榜 2月榜 3周榜
					page: 1, //是	int	1页数 默认第一页
					limit: 10 //是	int	每页几条 默认10
				}).then(res => {
          if (res.data.result.length != 0) {
            console.log("榜单数据=",res.data.result)
						that.Leaderboard = res.data.result

						that.nickname1 = res.data.result[0].nickname
						that.avatar1 = res.data.result[0].avatar
						that.amount1 = res.data.result[0].amount
						that.spread_people_num1 = res.data.result[0].spread_people_num

						that.nickname2 = res.data.result[1].nickname
						that.avatar2 = res.data.result[1].avatar
						that.amount2 = res.data.result[1].amount
						that.spread_people_num2 = res.data.result[1].spread_people_num

						that.nickname3 = res.data.result[2].nickname
						that.avatar3 = res.data.result[2].avatar
						that.amount3 = res.data.result[2].amount
						that.spread_people_num3 = res.data.result[2].spread_people_num

					} else {
						that.Leaderboard = []
					}

				}).catch(err => {
					/*uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});*/
				})
			},
			tabsRchange(data, index) {
				let that = this
				that.cardListidx = index;
				if (index == 0) {
					that.types = 1
					that.getLeaderboard()
				} else if (index == 1) {
					that.types = 2
					that.getLeaderboard()
				} else if (index == 2) {
					that.types = 3
					that.getLeaderboard()
				}
			},
			tabschange(e){
				this.tabsrcurrent = e
				if(e == 0){
					this.getLeaderboard()
				} else {
					this.getGetinviteRanklist()
				}
			},
			getGetinviteRanklist(){
				let that = this
				that.$api.GetinviteRank({
					page: 1, //是	int	1页数 默认第一页
					limit: 10 //是	int	每页几条 默认10
				}).then(res => {
					if (res.data.result.length != 0) {
						that.Leaderboard2 = res.data.result
						
						that.nickname11 = res.data.result[0].nickname
						that.avatar11 = res.data.result[0].avatar
						that.amount11 = res.data.result[0].user_num
						//that.spread_people_num11 = res.data.result[0].spread_people_num
						
						that.nickname22 = res.data.result[1].nickname
						that.avatar22 = res.data.result[1].avatar
						that.amount22 = res.data.result[1].user_num
						//that.spread_people_num22 = res.data.result[1].spread_people_num
						
						that.nickname33 = res.data.result[2].nickname
						that.avatar33 = res.data.result[2].avatar
						that.amount33 = res.data.result[2].user_num
						//that.spread_people_num33 = res.data.result[2].spread_people_num
					} else {
						that.Leaderboard2 = []
					}
				}).catch(err => {
					// uni.showToast({
					// 	title: err.data.msg,
					// 	icon: 'none',
					// 	duration: 2000
					// });
				})
			},
			toyq(){
				uni.navigateTo({
					url: '/subpackageB/pages/Shareposters/Shareposters'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('https://h5.hwhsh.com/public/uploads/h5/yqb/yqb_bgtu.png');
		background-position: center;
		background-size: 100% 100%;
		height: calc(100vh);
		background-repeat: no-repeat;
		background-color: #fff2e3;
	}
	
	.xuanfu_botton {
		background-image: linear-gradient(to top, #FFCAA5, #FFB873) !important;
		border-radius: 28rpx 28rpx 0 0;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		.my_info {
			display: flex;
			align-items: center;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 200rpx;
			}
			.xf_myname {
				padding-left: 20rpx;
				view:nth-child(1){
					font-size: 28rpx;
					color: #ffffff;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				view:nth-child(2){
					font-size: 26rpx;
					color: #ffffff;
				}
			}
			.right_czbtn {
				margin-left: auto;
				background-color: #fff;
				color: #CB7333;
				border-radius: 200rpx;
				padding: 8rpx 14rpx 8rpx 20rpx;
				font-size: 24rpx;
			}
		}
	}

	/deep/ .u-tab-bar {
		position: absolute;
		bottom: -3px !important;
	}

	.noData_box {
		margin-top: 0;
		text-align: center;
		color: #999;

		image {
			width: 280rpx;
		}

		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;

			.u-size-default {
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
		}
	}

	.top_box_bg {
		position: relative;
		height: 192px;
		margin-top: 30rpx;

		.ph_top_bg {
			width: 100%;
		}

		.jine_paih {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;


			/* #ifdef MP-WEIXIN */
			bottom: -20rpx;
			/* #endif */

			/* #ifdef H5 */
			bottom: -24rpx;
			/* #endif */

			/* #ifdef APP-PLUS */
			bottom: -20rpx;
			/* #endif */

			view {
				background-color: #FB8B15;
				flex: 1;
				margin: 0 10rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				border-radius: 200rpx;
				color: #ffffff;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}

		.qsm_box {
			position: absolute;
			z-index: 3;
			top: -50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 84%;
			left: 0;
			right: 0;
			margin: 0 auto;

			.dym_ren1 {
				text-align: center;
				flex: 1;
				position: relative;
				top: 130rpx;
				left: 0%;

				.touxiang_diyi2 {
					position: relative;

					.touxiang2 {
						border-radius: 200rpx;
						width: 80rpx;
						height: 80rpx;
						position: relative;
						top: 44rpx;
						right: -2.3%;
						border: 6rpx solid #D1DDE9;
						z-index: 2;
					}

					.guajian2 {
						width: 130rpx;
						position: absolute;
						top: -0;
						right: 0;
						left: 0;
						margin: 0 auto;
					}
				}

				.pm_guanzhu {
					border-radius: 200rpx;
					text-align: center;
					color: #333;
					width: 120rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
					padding-top: 10px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.pm_guanzhu_yg {
					border-radius: 200rpx;
					background-color: #444444;
					text-align: center;
					color: #828282;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
				}
			}

			.dym_ren2 {
				text-align: center;
				flex: 1;
				position: relative;
				top: 20px;

				.touxiang_diyi {
					position: relative;

					.touxiang1 {
						border-radius: 200rpx;
						width: 114rpx;
						height: 114rpx;
						position: relative;
						z-index: 2;
						top: 53rpx;
						right: -4rpx;
						border: 6rpx solid #FDE496;
					}

					.guajian1 {
						width: 190rpx;
						position: absolute;
						top: 0rpx;
						right: 0;
						left: 0;
						margin: 0 auto;
					}
				}

				.pm_guanzhu {
					border-radius: 200rpx;
					text-align: center;
					color: #333;
					width: 120rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
					padding-top: 10px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.pm_guanzhu_yg {
					border-radius: 200rpx;
					background-color: #444444;
					text-align: center;
					color: #828282;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
				}
			}

			.dym_ren3 {
				text-align: center;
				flex: 1;
				position: relative;
				top: 130rpx;
				right: 0;

				.touxiang_diyi3 {
					position: relative;

					.touxiang3 {
						border-radius: 200rpx;
						width: 80rpx;
						height: 80rpx;
						position: relative;
						top: 44rpx;
						right: -3%;
						border: 6rpx solid #FED19F;
						z-index: 2;
					}

					.guajian3 {
						width: 130rpx;
						position: absolute;
						top: -0;
						right: 0;
						left: 0;
						margin: 0 auto;
					}
				}

				.pm_guanzhu {
					border-radius: 200rpx;
					text-align: center;
					color: #333333;
					width: 120rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
					padding-top: 10px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.pm_guanzhu_yg {
					border-radius: 200rpx;
					background-color: #444444;
					text-align: center;
					color: #828282;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					margin: 0 auto;
					position: relative;
					z-index: 4;
				}
			}
		}

		.ph_zhuzi_bpx {
			position: absolute;
			bottom: 0;
			z-index: 2;
			width: 100%;

			.dibutu {
				position: relative;

				.ph_zhuzi {
					width: 100%;
				}

				.dibutu_jine1 {
					display: flex;
					align-items: center;
					position: absolute;
					width: 80%;
					bottom: 100rpx;
					left: 0;
					right: 0;
					margin: 0 auto;

					.yizhuan {
						flex: 1;
						text-align: center;

						view {
							color: #CB7333;
							font-size: 28rpx;
							font-weight: bold;
						}

						.qianyi {
							position: relative;
							top: 70rpx;
						}

						.qianer {
							position: relative;
							top: 70rpx;
						}
					}
				}

				.dibutu_jine {
					display: flex;
					align-items: center;
					position: absolute;
					width: 80%;
					bottom: 115rpx;
					left: 0;
					right: 0;
					margin: 0 auto;

					view {
						flex: 1;
						text-align: center;
						color: #fff;
						font-size: 36rpx;
						font-weight: bold;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						position: relative;
						top: -7px;
					}

					.djer {
						position: relative;
						top: 60rpx;
					}

					.dijisna {
						position: relative;
						top: 60rpx;
					}
				}
			}
		}
	}

	.card_list {
		width: 460rpx;
		margin: 30rpx auto 0;
		padding: 10rpx;
		background-color: #FDF3E6;
		border-radius: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.selectA {
			background-image: linear-gradient(to left, #FFC491, #FFAB6B) !important;
			color: #ffffff !important;
			font-weight: bold;
		}

		.card_list_item {
			text-align: center;
			//background-color: #f7f7f7;
			border-radius: 200rpx;
			height: 56rpx;
			line-height: 56rpx;
			flex: 1;
			margin: 0 12rpx 0 0;
			position: relative;
			font-size: 28rpx;
			color: #CB7333;

			.nianka {}
		}

		.card_list_item:last-child {
			margin: 0 !important;
		}
	}
	
	.tabs_wrap {
		position: relative;
		z-index: 9;
	}

	.my_member_title {
		position: relative;
		z-index: 9;
		width: 100%;
		font-weight: bold;
		text-align: center;
		margin: 30rpx 0 16rpx 0;
		color: #FF823C;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
		}
	}

	.r_list {
		width: 95%;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 30rpx 20rpx;
		border-radius: 28rpx;
		border: 8rpx solid #FFE1D4;

		.r_list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 0 50rpx 0;

			.l_1 {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
				width: 50%;

				text {
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
					width: 20px;
				}

				.l_2 {
					display: flex;
					align-items: center;
					position: relative;
					margin-left: 10rpx;

					.u_iamge {
						width: 72rpx;
						height: 72rpx;
						border-radius: 200rpx;
						margin-right: 10rpx;

						image {
							width: 72rpx;
							height: 72rpx;
							border-radius: 200rpx;
						}
					}

					.u_name {
						font-weight: bold;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
			}

			.l_3 {
				font-weight: bold;
				text-align: center;
				position: relative;
				left: -18px;
			}

			.l_4 {
				font-weight: bold;
				color: #F09536;
				position: relative;
				left: -18px;
			}
		}

		.r_list_box:last-child {
			margin: 0;
		}

		.r_list_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-top: 1px solid #f3f3f3;
			border-bottom: 1px solid #f3f3f3;

			view {
				color: #999999;
			}
		}
	}

	.r_title {
		text-align: center;
		margin: 30rpx 0 16rpx 0;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #FF773A;
		}
	}
</style>